import { Icon } from "@/components/icon";
import useLocale from "@/locales/use-locale";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/tabs";
import GeneralTab from "./general-tab";
import NotificationsTab from "./notifications-tab";
import SecurityTab from "./security-tab";

/**
 * 用户账户管理 - 如修身齐家治国平天下，管理个人账户事务
 * 包含基本信息、通知设置、安全设置等功能模块
 */
function UserAccount() {
	const { t } = useLocale();

	return (
		<Tabs defaultValue="1" orientation="vertical">
			<TabsList>
				<TabsTrigger value="1">
					<div className="flex items-center">
						<Icon icon="solar:user-id-bold" size={24} className="mr-2" />
						<span>{t("sys.pages.management.userAccount.generalSettings")}</span>
					</div>
				</TabsTrigger>
				<TabsTrigger value="2">
					<div className="flex items-center">
						<Icon icon="solar:bell-bing-bold-duotone" size={24} className="mr-2" />
						<span>{t("sys.pages.management.userAccount.notifications")}</span>
					</div>
				</TabsTrigger>
				<TabsTrigger value="3">
					<div className="flex items-center">
						<Icon icon="solar:key-minimalistic-square-3-bold-duotone" size={24} className="mr-2" />
						<span>{t("sys.pages.management.userAccount.securitySettings")}</span>
					</div>
				</TabsTrigger>
			</TabsList>
			<TabsContent value="1">
				<GeneralTab />
			</TabsContent>
			<TabsContent value="2">
				<NotificationsTab />
			</TabsContent>
			<TabsContent value="3">
				<SecurityTab />
			</TabsContent>
		</Tabs>
	);
}

export default UserAccount;
